<template>
  <!-- 环形图 -->
  <div id="RadarChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "RadarChart",
  components: {},
  props: {
    Ename: String,
    Etype: String
  },
  data() {
    return {
      value: 60,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawRadarChart();
  },

  methods: {
    drawRadarChart() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        graphic: [
          {
            type: 'text', //通过不同top值可以设置上下显示
            left: 'center',
            top: 'center',
            style: {
              text: that.Ename,
              textAlign: 'center',
              fill: '#f8f8f8', //文字的颜色 
              width: 30,
              height: 30,
              fontSize: this.Etype=='max'? 18 : 14,
              fontWeight: 700,
              fontFamily: "'Arial Negreta', 'Arial Normal', 'Arial'",
            }  
          }
        ],
        color:["#18FF73","#FFC614","#DD3030"],
        series: [
          {
            name: "数量",
            type: "pie",
            radius: that.Etype=='max'? ["45%", "75%"] : ["50%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 50, name: "正常" },
              { value: 30, name: "关注" },
              { value: 20, name: "预警" },
            ],
          },
        ],
      };
      mychart.setOption(option);
    },
  },
};
</script>
<style lang='less' scoped>
#RadarChart {
  width: 100%;
  height: 100%;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
    display: flex;
    justify-content: center;
  }
}
</style>